<template>
  <div id="temp">
    <div id="tips" v-if="dataList.length==0">
      <h2>购物车里面空空如也!!!</h2>
    </div>
    <div class="goodsList" v-for="(item,index) in dataList" :key="index">
      <mt-switch v-model="value[index]"></mt-switch>
      <img :src="item.thumb_path">
      <div class="showRight">
        <h5>{{item.title}}</h5>
        <ul>
          <li class="redColor">
            <span>￥{{item.sell_price}}</span>
          </li>
          <li>
            <button @click="substract({id:item.id,type:'substract'},index)">-</button>
            <span class="shopCount">{{item.cou}}</span>
            <button @click="add({id:item.id,type:'add'},index)">+</button>
          </li>
          <li>
            <span>
              <a href="javascript:;" @click="del(item.id,index)">删除</a>
            </span>
          </li>
        </ul>
      </div>
    </div>
    <div id="payment" v-if="dataList.length!=0">
      <div id="_left">
        <b>总计(不含运费)：</b>
        <p>已经选择商品{{totalCount}}件</p>
        <p>总价￥{{totalMoney}}元</p>
      </div>
      <div id="_right">
        <a href="http://www.baidu.com">
          <mt-button type="danger" size="small">去结算</mt-button>
        </a>
      </div>
    </div>
  </div>
</template>
<script>

//引入获取数据的js文件
import { getItem, setItem, delItem, updateData } from '../../kits/localSg.js'


//导入提示小组件
import { Toast } from 'mint-ui';

export default {
  data() {
    return {
      dataList: [],   //最终需要渲染在页面上的数据
      goodsObj: {},   //存储物品id和数量的对象
      goodsStr: '',   //用来获得数据的以物品id组成的字符串
      goodsData: [],    //从localStorage里面获得的数据
      value: [],  //记录是否选中
      totalCount: 0,   //记录选中的物品的总件数
      totalMoney: 0,  //记录选中的物品的总价格
      dataCount: 0   //记录购物车物品的总件数
    }

  },
  created() {
    this.getgoodsStr();
    this.getgoodsList();
  },
  updated() {
  },
  methods: {
    getgoodsStr() {
      this.goodsData = getItem();
      if (this.goodsData.length <= 0) return;
      for (var i = this.goodsData.length - 1; i >= 0; i--) {
        if (!this.goodsObj[this.goodsData[i].goodsId]) {
          this.goodsObj[this.goodsData[i].goodsId] = this.goodsData[i].goodsCount
        } else {
          this.goodsObj[this.goodsData[i].goodsId] = parseInt(this.goodsObj[this.goodsData[i].goodsId]) + this.goodsData[i].goodsCount
        }
      }
      for (var k in this.goodsObj) {
        this.goodsStr += k + ","
      }

      this.goodsStr = this.goodsStr.substring(0, this.goodsStr.length - 1)
    },

    //通过API获得数据
    getgoodsList() {
      //如果localStorage获得是数据是空的购物车里面也应该是空的不需要请求数据直接return;
      if (!this.goodsStr) {
        this.dataList = [];
        return;
      }

      this.$http.get("http://182.254.146.100:8899/api/goods/getshopcarlist/" + this.goodsStr)
        .then(function (res) {
          if (res.body.status != 0) {
            Toast({
              message: res.body.message,
              duration: 3000
            });
            return;
          }
          this.dataList = res.body.message;

          for (var i = 0; i < this.dataList.length; i++) {
            this.dataList[i].cou = this.goodsObj[this.dataList[i].id];
            this.value.push(true);
          };
          this.getTotal();
        })
    },

    //将购物车里面选中的物品的数量和总价格显示在页面上
    getTotal() {
      this.totalCount = 0;
      this.totalMoney = 0;
      this.dataCount = 0;
      for (var i = 0; i < this.dataList.length; i++) {
        this.dataCount += this.dataList[i].cou;
        if (this.value[i]) {
          this.totalCount += this.dataList[i].cou;
          this.totalMoney += this.dataList[i].cou * this.dataList[i].sell_price;
        }
      }
      var shopcarCount = document.getElementById("shopcarCount")
      shopcarCount.innerText = this.dataCount;
    },

    //点击+物品+1
    add(obj, index) {
      updateData(obj);
      this.dataList[index].cou++;
      this.getTotal();
    },

    //点击-物品-1;
    substract(obj, index) {
      updateData(obj);
      this.dataList[index].cou--;
      if (this.dataList[index].cou < 0) this.dataList[index].cou = 0;
      this.getTotal();
    },

    //点击删除键删除对应的物品
    del(id, index) {
      this.dataList.splice(index, 1)
      this.value.splice(index, 1)
      delItem(id)
    }
  },
  watch: {
    //对this.value进行监视 值改变后重新计算
    "value": function (newval, oldval) {
      this.getTotal();
    }
  }
}
</script>
<style scoped>
.goodsList {
  width: 100%;
  height: 160px;
  border-bottom: 1px solid #bcbcbc;
  padding-left: 150px;
  box-sizing: border-box;
  position: relative;
}

.mint-switch {
  display: inline-block;
  position: absolute;
  top: 60px;
  left: 5px;
}

.goodsList img {
  width: 75px;
  height: 75px;
  position: absolute;
  top: 38px;
  left: 70px;
}

.goodsList .showRight h5 {
  color: #0094ff;
  line-height: 20px;
  font-weight: 800;
  height: 80px;
  max-height:80px;
  overflow:hidden;
}

.goodsList .showRight{
  padding:5px 10px;
  box-sizing: border-box;
  height: 120px;
}
.goodsList .showRight ul {
  margin: 0;
  padding: 0;
}

.goodsList .showRight ul li {
  list-style: none;
  display: inline-block;
}

.goodsList .showRight ul li:first-of-type{
  display:block;
}

.goodsList .showRight ul li:nth-of-type(2) {
  margin: 0 3px;
}

.redColor {
  color: #e92322;
  font-weight: 800;
}

.shopCount {
  display: inline-block;
  width: 35px;
  height: 20px;
  font-size: 14px;
  border: 1px solid #bcbcbc;
  line-height: 20px;
  text-align: center;
  border-radius: 3px;
}

.goodsList button {
  height: 20px;
  padding: 1px 10px;
}

#tips {
  width: 100%;
  height: 100px;
  overflow: hidden;
}

#tips h2 {
  text-align: center;
  font-family: "Microsoft Yahei";
  margin-top: 35px;
}

#payment {
  width: 100%;
  height: 120px;
  background-color: #efefef;
}

#_left {
  width: 70%;
  height: 100%;
  float: left;
  line-height: 30px;
  padding: 30px 0 0 20px;
  box-sizing: border-box;
}

#_left p {
  color: #ababab;
  margin: 0;
  line-height: 20px;
  text-indent:2em;
}

#_right {
  width: 30%;
  height: 100%;
  float: left;
  text-align: center;
}

#_right a {
  display: block;
  width: 100%;
  height: 100%;
}

.mint-button {
  margin-top: 45px;
}
</style>


